<template>
	<div class="user-visit-record">
		<transition name="fade">
			<div class="w100p h100p pos-fix pos-c z1000 user-visit-list-alarm" v-show="isShow">
				<div class="bg-color-white f0 h100 lh100 text-center pos-relative">
					<span @click="closeAlarmBox" class="color-gray-5 f30 mouse-pointer w36 h36 lh36 pos-abs pos-c-l l10 iconfont icon-left"></span>
					<span class="color-gray-7 f34">{{ getAlarmTitle }}</span>
				</div>
				
				<div class="w100p h100p pos-abs t120 l0 r0 b0 user-visit-record-list">
					
					<div class="user-visit-record-list-item" v-for="(item, index) in visitList">
						<div @click="openMemberDetailsAlarm(item.id)" class="clear">
							<div class="fl w90 h90 overflow-hidden pos-relative member-avatar">
								<img class=" max-w100p max-h100p pos-abs pos-c" :src="item.avatar" :alt="item.nickName">
							</div>
							
							<div class="h90 mg-l100">
								<div class="f0 h100p pos-relative">
									<div class="color-gray-6 f28 h40 lh40">{{ item.nickName }}</div>
									
									<div class="f0 w100p pos-abs l0 b0 ">
										<div class="fl gender">
											<span class="color-blue f28 mg-r8 iconfont icon-male" v-if="item.gender === 2"></span>
											<span class="color-pink f28 mg-r8 iconfont icon-female" v-if="item.gender === 1"></span>
										</div>
										
										<div class="color-gray-5 fr mg-r100 f28 visit-datetime">
											<span>{{ item.dateTime }}</span>
										</div>
									</div>
									
									<span class="color-gray-5 f32 mouse-pointer w36 h36 lh36 pos-abs pos-c-r r5 iconfont icon-right"></span>
								</div>
							</div>
							
						</div>
					</div>
					
					
				</div>
			</div>
		</transition>
		
		<!-- 会员详情弹窗 begin -->
		<memberDetailsAlarm ref="memberDetails"></memberDetailsAlarm>
		<!-- 会员详情弹窗 end -->
		
		<!--loading 动画 begin-->
		<transition name="el-fade-in">
			<loading ref="loading"></loading>
		</transition>
		<!-- loading 动画 end-->
	</div>
</template>

<script>
	import memberDetailsAlarm from '../home/member-details'
	export default {
		name: "user-visit-list-alarm",
		
		components: {
			memberDetailsAlarm
		},
		
		computed: {
			getAlarmTitle() {
				if (this.type === 'visit') {
					return '我看过谁'
				}
				else if (this.type === 'return-visit') {
					return '谁看过我'
				}
				else {
					return ''
				}
			}
		},
		
		data() {
			return {
				isShow: false,
				
				type: '', // visit：访问，return-visit：回访

				visitList: []
			}
		},
		
		methods: {
			/* ---------------------------------------- 数据初始化 begin ---------------------------------------- */
			resetAllData() {
				this.visitList = [];
			},
			/* ---------------------------------------- 数据初始化 end ---------------------------------------- */
			
			/* ---------------------------------------- 窗口控制区 begin ---------------------------------------- */

			openAlarmBox(type) {
				this.resetAllData(); // 初始化
				
				this.type = type;

				this.$refs.loading.openLoading('正在读取用户数据'); // 打开loading动画
				setTimeout(() => {
					this.$refs.loading.closeLoading(); // 关闭loading动画

					this.visitList = [
						{
							id: 1,
							avatar: '/static/image/mem/2.jpg',
							gender: 2, // 1：female，2：male
							nickName: '立花 泷',
							dateTime: '2021-01-06 15:36:20'
						},
						{
							id: 2,
							avatar: '/static/image/mem/1.jpg',
							gender: 1, // 1：female，2：male
							nickName: '宫水 三叶',
							dateTime: '2021-01-06 12:36:20'
						},
						{
							id: 3,
							avatar: '/static/image/mem/2.jpg',
							gender: 2, // 1：female，2：male
							nickName: '立花 泷',
							dateTime: '2021-01-06 15:36:20'
						},
						{
							id: 4,
							avatar: '/static/image/mem/1.jpg',
							gender: 1, // 1：female，2：male
							nickName: '宫水 三叶',
							dateTime: '2021-01-06 12:36:20'
						},
						{
							id: 5,
							avatar: '/static/image/mem/2.jpg',
							gender: 2, // 1：female，2：male
							nickName: '立花 泷',
							dateTime: '2021-01-06 15:36:20'
						},
						{
							id: 6,
							avatar: '/static/image/mem/1.jpg',
							gender: 1, // 1：female，2：male
							nickName: '宫水 三叶',
							dateTime: '2021-01-06 12:36:20'
						},
					];

					this.isShow  = true;
				}, 1000);
			},

			closeAlarmBox() {
				this.isShow  = false;
				this.resetAllData(); // 初始化
			},

			/* ---------------------------------------- 窗口控制区 end ---------------------------------------- */
			
			/* ---------------------------------------- 窗口控制区 end ---------------------------------------- */
			
			// 打开会员详情页
			openMemberDetailsAlarm(id) {
				this.$refs.memberDetails.openAlarmBox(id);
			}
			
			/* ---------------------------------------- 窗口控制区 end ---------------------------------------- */
		}
	}
</script>

<style>
	.user-visit-list-alarm { background: #f5f5f5; }
	.user-visit-record-list {  }
	.user-visit-record-list-item { background: #fff; margin-bottom: 0.4rem; padding: 0.4rem 0.4rem; }
</style>
